// 全局指令
// 导入所需图片
import defaltImg from '@/assets/images/200.png'
import lodImg from '@/assets/images/loading.gif'
// 引入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'

export default {
  install (app) {
    app.directive('imgLazy', {
      // el:img dom对象
      // binding.value  图片url地址
      mounted (el, binding) {
        const { stop } = useIntersectionObserver(
          // 参数一:被监控的元素或组件
          el,
          // 参数二:进入可视区域的回调
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 进入时默认加载
              el.src = lodImg
              // 测试效果用
              // setTimeout(() => {
              //   el.src = binding.value
              // }, 2000)
              // 获取数据后加载
              el.src = binding.value
              // 获取错误时加载
              el.onerror = () => {
                el.src = defaltImg
              }
              stop()
            }
          },
          // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
          { threshold: 0 }
        )
      }
    })
  }
}

// export function useObserver () {
//   const target = ref(null)
//   const { stop } = useIntersectionObserver(
//     target,
//     ([{ isIntersecting }]) => {
//       if (isIntersecting) {
//         stop()
//       }
//     },
//     // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
//     { threshold: 0 }
//   )
//   return { target }
// }
/*
1.stop 一个可执行的函数用来停止监听行为
2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
特别注意: 对于目标target是否进入视口区域的监听会一直进行不会只监听一次
*/
